<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *, *::before, *::after {
            box-sizing:border-box;
        }

        :root{
            --padding:14px;
        }

        body {
            background:#444;
            display:grid;
            place-items:center;
            min-height:100vh;
        }

        #app {
            overflow:hidden;
            background:whitesmoke;
            position:relative;
            width:380px;
            height:720px;
            margin: 2em auto;
            padding: var(--padding) * 1.2;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
            display:grid;
            grid-template-columns:repeat(2, 1fr);
            grid-gap:var(--padding);
        }

        .element {
            --color:#726aa3;
            transform-origin:top center;
            cursor:pointer;
            box-shadow:0 0 10px rgba(0,0,0,0.2);
            background:var(--color);
            position:relative;
        }

        .pinned {
            top:0;
            left:0;
            width:100%;
            height:100%;
            margin: 0;
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
    <script>

        const getBBox = element => element.getBoundingClientRect()
        const OPTIONS = { duration:350, easing:'ease-in-out', fill:'both' }

        Array.from(document.querySelectorAll('.element')).forEach(el => {
            
            el.dataset.positioned = 'false';
            el.style.setProperty('z-index',0)
            el.style.setProperty('transform-origin','top left')
            
            el.addEventListener('click', ({target}) => {
                let { x:beforeX, y:beforeY, width:beforeW, height:beforeH } = getBBox(target);
                target.classList.add('pinned')
                let { x:afterX, y:afterY, width:afterW, height:afterH } = getBBox(target);
                target.classList.remove('pinned')
                
                let deltaX = (beforeX - afterX) * -1,
                    deltaY = (beforeY - afterY) * -1,
                    scaleX = afterW / beforeW,
                    scaleY = afterH / beforeH;
                
                if (target.dataset.positioned == 'true') {
                    target.animate([
                        { 
                            transform:`translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY}) `, 
                            opacity:0.65
                        },
                        { transform:`translate(0,0) scale(1,1) `, opacity:1 }
                    ], OPTIONS).addEventListener('finish', () => {
                        target.dataset.positioned = 'false'
                        target.style.removeProperty('z-index')
                    })		
                } else {
                    target.style.setProperty('z-index', 1000);
                    target.animate([
                        {  transform:`translate(0,0) scale(1,1)`, opacity:1 }, { 
                            transform:`translate(${deltaX}px, ${deltaY}px) scale(${scaleX}, ${scaleY})`, 
                            opacity:0.65
                        }
                    ], OPTIONS).addEventListener('finish', () => {
                        target.dataset.positioned = 'true'
                    })		
                }
            })
            
        })
    </script>
</body>
</html>